<template>
  <div class="wrap">
    <div class="new">
      <router-link tag="div" class="new-tab" to="/one">
        <span>one</span>
      </router-link>

      <router-link tag="div" class="new-tab" to="/two">
        <span>two</span>
      </router-link>

      <router-link tag="div" class="new-tab" to="/three">
        <span>three</span>
      </router-link>

      <router-link tag="div" class="new-tab" to="/four">
        <span>four</span>
      </router-link>  

      <router-link tag="div" class="new-tab" to="/five">
        <span>five</span>
      </router-link>  
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
}
.new{
  width: 100%;
  height: 50px;
  background: pink;
  display: flex;
}
.new-tab{
  text-align: center;
  cursor: pointer;
  flex: 1;
}
.new-tab span{
  line-height: 50px;
}
h1{
  text-align: center;
}


</style>
